GermanWikipedia - /page/entry.mu

<!DOCTYPE html>

<title>Hierarchisches Layout</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading">Hierarchisches Layout</h1>

</header>

</div>

Die Entwicklung von Algorithmen für hierarchisches Layout ist ein Themengebiet der <a href="Informatik" title="Informatik">Informatik</a> und beschäftigt sich mit der Definition von Berechnungsvorschriften zum Layout und <a href="Graphzeichnen" title="Graphzeichnen">Zeichnen hierarchischer Graphen</a>. Die Berechnung des Layouts und das Zeichnen der Graphen kann statisch (das Layout wird in einem Durchlauf berechnet und gezeichnet) oder dynamisch (es wird ein Start-Layout berechnet und in mehreren Durchläufen optimiert und gezeichnet) erfolgen.

<div class="mw-heading mw-heading2"><h2 id="Grundlagen">Grundlagen</h2></div>

In seiner reinen Form ist der hierarchische Graph ein gerichteter Graph und hat eine Quelle (Knoten ohne eingehende Kanten) sowie mehrere Senken (Knoten ohne ausgehende Kanten). Die zwischen Quelle und Senke liegenden Knoten können abhängig von ihrer Entfernung von der Quelle in <a href="%C3%84quivalenzklasse" class="mw-redirect" title="Äquivalenzklasse">Äquivalenzklassen</a> unterteilt werden.

<div class="mw-heading mw-heading2"><h2 id="Layoutansätze">Layoutansätze</h2></div>

Um die Charakteristik eines hierarchischen Graphen herauszuarbeiten, bieten sich zwei Ansätze für das Layout, also die Anordnung der Knoten und Kanten des Graphen zueinander, an.

<div class="mw-heading mw-heading3"><h3 id="Eiskristall">Eiskristall</h3></div>

Ein hierarchisches Layout als Eiskristall ermöglicht viele unterschiedliche konkrete Ausprägungen bei i. d. R. geringem Flächenverbrauch gegenüber einem Layout als Baum, kann aber keine Ordnung zwischen Knoten derselben Äquivalenzebene darstellen.

Bei diesem Layoutansatz steht die Quelle im Mittelpunkt und alle Knoten einer Äquivalenzklasse haben den gleichen Abstand vom Knoten der übergeordneten Äquivalenzklasse. Die konkrete Ausprägung des Layouts unterscheidet sich einerseits dadurch, ob

<ul><li>alle Kanten im Graph die gleiche Länge aufweisen,</li>

<li>alle Kanten zu Knoten einer definierten Äquivalenzebene die gleiche Länge aufweisen, aber alle Kanten zu Knoten der untergeordneten Äquivalenzebene eine andere, untereinander wieder gleiche Länge aufweisen oder</li>

<li>alle Kanten im Graph eine unterschiedliche Länge aufweisen</li></ul>

und andererseits dadurch, ob

<ul><li>Knoten einer untergeordneten Äquivalenzebene nur von der Quelle weg angeordnet werden oder</li>

<li>in jeder beliebigen Richtung angeordnet werden.</li></ul>

Der einfachste statische Algorithmus für Eiskristall-Layout berechnet die Anordnung der Knoten auf konzentrischen Kreisen um die Quelle. Er ermittelt das Gewicht jedes Knotens anhand der Anzahl der mit ihm verbundenen Knoten aller untergeordneten Äquivalenzebenen. Dieses Gewicht ist dann Maß für den Winkel, den der Knoten auf dem seiner Äquivalenzebenen zugeordneten konzentrischen Kreis beansprucht. Sowohl die Berechnung des Gewichts der Knoten als auch das Zeichnen von Knoten und Kanten wird durch rekursive Methodenaufrufe realisiert. Für das Zeichnen muss darüber hinaus ein Startwinkel festgelegt werden.

<div class="mw-heading mw-heading4"><h4 id="Implementierung">Implementierung</h4></div>

Die folgende Klasse gibt ein Beispiel für die <a href="Implementierung" title="Implementierung">Implementierung</a> einer Node-Klasse in C#, anhand derer man die Funktionsweise gut nachvollziehen kann.

<div class="mw-highlight mw-highlight-lang-csharp mw-content-ltr" dir="ltr"><pre> public class GraphNode

{

public const Int32 NodeRadius = 10; // Draw node as point, use radius = 10.

public List<GraphNode> Children = new List<GraphNode>(); // Every node circa have 0..N child nodes.

public Int32 Level; // Define the level of equivalence.

public Int32 Weight; // Store the aggregated weight.

private GraphNode() // Prevent default constructor calls.

{ ; }

public GraphNode(Int32 level) // Initializing constructor.

{ Level = level; }

public Int32 CalculateWeight() // Calculate weight recursively.

{ if (Children.Count == 0) Weight = 1;

else Weight = 0;

foreach (GraphNode child in Children) Weight += child.CalculateWeight();

return Weight;

}

private Int32 X(Graphics g, double angle, double radius) // Calculate x-position on concentric circle.

{ return (Int32)((g.VisibleClipBounds.Width) / 2 + Math.Cos(angle) * radius * Level); }

private Int32 Y(Graphics g, double angle, double radius) // Calculate y-position on concentric circle.

{ return (Int32)((g.VisibleClipBounds.Height) / 2 + Math.Sin(angle) * radius * Level); }

public void DrawEqualAngle(Graphics g, double radius, double start, double share, Rectangle parent)

{ Brush brush;

Pen pen;

Double angle;

Rectangle rect;

angle = start + Weight * share / 2; // Calculate angle of this node.

rect = new Rectangle(X(g, angle, radius) - NodeRadius, // Calculate position of this node.

Y(g, angle, radius) - NodeRadius,

NodeRadius * 2, NodeRadius * 2);

foreach (GraphNode child in Children) // Draw child nodes.

{ child.DrawEqualAngle(g, radius, start, share, rect);

start += share * child.Weight;

}

brush = new SolidBrush((Level == 1 ? Color.DarkBlue :

(Level == 2 ? Color.DarkGreen : Color.DarkRed)));

pen = new Pen(brush);

g.DrawLine(pen, parent.Left + parent.Width / 2, // Draw this node's connection to parent.

parent.Top + parent.Height / 2,

rect.Left + rect.Width / 2, rect.Top + rect.Height / 2);

g.FillEllipse(brush, rect); // Draw this node.

pen.Dispose();

brush.Dispose();

}

</pre></div>

Die folgende Methode gibt ein Beispiel für die <a href="Implementierung" title="Implementierung">Implementierung</a> des vollständigen Zeichnens in C#, wobei die Methoden der Node-Klasse für die Berechnung des Gewichtes und das Zeichnen aufgerufen werden.

<div class="mw-highlight mw-highlight-lang-csharp mw-content-ltr" dir="ltr"><pre> private void PaintEqualAngle()

{ Int32 totalWeight = 0;

Double startAngle = 0;

Graphics g;

Brush brush;

Rectangle rect;

foreach (GraphNode node in Graph) // Calculate maximum weight.

totalWeight += node.CalculateWeight();

g = this.CreateGraphics();

brush = new SolidBrush(BackColor);

g.FillRectangle(brush, g.VisibleClipBounds); // Clear background.

brush.Dispose();

rect = new Rectangle((Int32)((g.VisibleClipBounds.Width) / 2) - GraphNode.NodeRadius,

(Int32)((g.VisibleClipBounds.Height) / 2) - GraphNode.NodeRadius,

GraphNode.NodeRadius * 2, GraphNode.NodeRadius * 2);

foreach (GraphNode node in Graph) // Draw child nodes.

{ node.DrawEqualAngle(g, Math.Min(g.VisibleClipBounds.Width, g.VisibleClipBounds.Height) / 7,

startAngle, Math.PI * 2 / totalWeight, rect);

startAngle += Math.PI * 2 / totalWeight * node.Weight;

}

brush = new SolidBrush(Color.Black);

g.FillEllipse(brush, rect); // Draw root.

brush.Dispose();

g.Dispose();

}

</pre></div>

Ein hierarchisches Layout als Baum ermöglicht die Darstellung einer Ordnung zwischen Knoten derselben Äquivalenzebene (z. B. durch horizontale oder vertikale Anordnung), beansprucht aber i. d. R. mehr Fläche als ein Layout als Eiskristall.

Bei diesem Layoutansatz ist eine Richtung (z. B. von oben nach unten) vorgegeben, in der sich der Graph ausbreitet. Alle Knoten einer Äquivalenzklasse liegen auf derselben Ebene. Die konkrete Ausprägung des Layouts wird gekennzeichnet durch die Entwicklungsrichtung (horizontal oder vertikal) je Äquivalenzebene.

Der einfachste statische Algorithmus für Baum-Layout berechnet die Anordnung der Knoten auf allen Äquivalenzebenen in derselben, z. B. horizontalen, Entwicklungsrichtung. Er ermittelt das Gewicht jedes Knotens anhand der Anzahl der mit ihm verbundenen Knoten aller untergeordneten Äquivalenzebenen. Dieses Gewicht ist dann Maß für den Anteil, den der Knoten auf der seiner Äquivalenzebenen zugeordneten Entwicklungsrichtung beansprucht. Sowohl die Berechnung des Gewichts der Knoten als auch das Zeichnen von Knoten und Kanten wird durch rekursive Methodenaufrufe realisiert.

<div class="mw-heading mw-heading4"><h4 id="Implementierung_2">Implementierung</h4></div>

Die folgende Methode gibt ein Beispiel einer <a href="Implementierung" title="Implementierung">Implementierung</a> zur Erweiterung der Node-Klasse in C#, anhand derer man die Funktionsweise gut nachvollziehen kann.

<div class="mw-highlight mw-highlight-lang-csharp mw-content-ltr" dir="ltr"><pre> public void DrawHorizontalTree(Graphics g, double distance, double start, double share, Rectangle parent)

{ Brush brush;

Pen pen;

Double position;

Rectangle rect;

position = start + Weight * share / 2; // Calculate angle of this node.

rect = new Rectangle((Int32)(position - NodeRadius), // Calculate position of this node.

(Int32)(distance * (Level + 1) - NodeRadius),

NodeRadius * 2, NodeRadius * 2);

foreach (GraphNode child in Children) // Draw child nodes.

{ child.DrawHorizontalTree(g, distance, start, share, rect);

start += share * child.Weight;

}

brush = new SolidBrush((Level == 1 ? Color.DarkBlue :

(Level == 2 ? Color.DarkGreen : Color.DarkRed)));

pen = new Pen(brush);

g.DrawLine(pen, parent.Left + parent.Width / 2, // Draw this node's connection to parent.

parent.Top + parent.Height / 2,

rect.Left + rect.Width / 2, rect.Top + rect.Height / 2);

g.FillEllipse(brush, rect); // Draw this node.

pen.Dispose();

brush.Dispose();

}

</pre></div>

Die folgende Methode gibt ein Beispiel für die <a href="Implementierung" title="Implementierung">Implementierung</a> des vollständigen Zeichnens in C#, wobei die Methoden der Node-Klasse für die Berechnung des Gewichtes und das Zeichnen aufgerufen werden.

<div class="mw-highlight mw-highlight-lang-csharp mw-content-ltr" dir="ltr"><pre> private void PaintHorizontalTree()

{ Int32 totalWeight = 0;

Double startWidth = 0;

Graphics g;

Brush brush;

Rectangle rect;

foreach (GraphNode node in Graph) // Calculate maximum weight.

totalWeight += node.CalculateWeight();

g = this.CreateGraphics();

brush = new SolidBrush(BackColor);

g.FillRectangle(brush, g.VisibleClipBounds); // Clear background.

brush.Dispose();

rect = new Rectangle((Int32)((g.VisibleClipBounds.Width) / 2) - GraphNode.NodeRadius,

(Int32)((g.VisibleClipBounds.Height) / 5) - GraphNode.NodeRadius,

GraphNode.NodeRadius * 2, GraphNode.NodeRadius * 2);

foreach (GraphNode node in Graph) // Draw child nodes.

{ node.DrawHorizontalTree(g, g.VisibleClipBounds.Height / 5,

startWidth, g.VisibleClipBounds.Width / totalWeight, rect);

startWidth += g.VisibleClipBounds.Width / totalWeight * node.Weight;

}

brush = new SolidBrush(Color.Black);

g.FillEllipse(brush, rect); // Draw root.

brush.Dispose();

g.Dispose();

}

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Anwendungen_hierarchischer_Layouts">Anwendungen hierarchischer Layouts</h3></div>

Hierarchische Graphen eignen sich zur Darstellung von Strukturen ohne Zyklen (Rückschleifen und Zusammenführung von Teilpfaden) wie:

<ul><li><a href="Organigramm" title="Organigramm">Organigrammen</a></li>

<li><a href="Funktionsbaum" title="Funktionsbaum">Funktionsbäumen</a></li>

<li><a href="Syntaxbaum" title="Syntaxbaum">Syntaxbäumen</a></li></ul></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2024-12-06" href="https://de.wikipedia.org/wiki/?title=Hierarchisches_Layout&oldid=251000356">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>